<template>
  <div class="main_menu">
    <!--左侧弹出菜单-->
    <div class="main_menu_right" :style="{backgroundImage: 'url(' + new_left + ')'}" v-if="flag" @click="SwitchFlag()">
      <!--左侧弹出菜单内容-->
      <div class="main_menu_list2" v-if="status">
        <div v-if="item.status==1" :style="{background:menu_color}" class="every_colms" v-for="(item,index) in columns" :key="index" @click="path(item)">
          <img :src="item.icon" alt="" class="every_colms_top">
          <span class="every_colms_bottom">{{item.title}}</span>
        </div>
      </div>
      <!--左侧弹出菜单内容-->



    </div>
    <div class="main_menu_left" :style="{backgroundImage: 'url(' + new_right + ')'}" @click=SwitchFlag() v-else>
      <!--左侧弹出菜单内容-->
      <div class="main_menu_list">
         <div v-if="item.status==1" :style="{background:menu_color}" class="every_colms" v-for="(item,index) in columns" :key="index" @click="path(item)">
              <img :src="item.icon" alt="" class="every_colms_top">
              <span class="every_colms_bottom">{{item.title}}</span>
         </div>
      </div>
      <!--左侧弹出菜单内容-->
    </div>
    <!--左侧弹出菜单-->
    <div class="screen_full" v-if="!flag"></div>
  </div>


</template>

<script>
    export default {
        name: "MainMenu",
        data(){
          return{
            status:false,
            flag:true,//表示左侧菜单状态，默认为显示right
            columns:[],//栏目数组
            new_left:'',
            new_right:'',
            menu_color:'',

          }
        },
        created(){
          this.getColorList();
          this.getColumn();
        },
        methods:{


          getColorList(){
            this.$http.get("api/ScreenkApi/getOrgan?vollege_id="+this.$util.vollege_id,null,r=>{
              // console.log('色调对象：',r.data);
              this.logo=r.data.logo_img;
              this.minqrcode=r.data.minqrcode;
              this.menu_color=r.data.menu_color;
              this.new_left=r.data.new_left;
              this.new_right=r.data.new_right;
              this.$util.storage.set("dpimg",r.data.dpimg);
              this.$util.storage.set("dtimg",r.data.dtimg);
              this.$util.storage.set("color",r.data.color)
              this.$util.storage.set("home_img",r.data.home_img)
              this.$util.storage.set("line_bg",r.data.line_bg)
              this.$util.storage.set("logo_img",r.data.logo_img)
              this.$util.storage.set("menu_bg",r.data.menu_bg)
              this.$util.storage.set("minqrcode",r.data.minqrcode)
              this.$util.storage.set("new_left",r.data.new_left)
              this.$util.storage.set("new_right",r.data.new_right)
              this.$util.storage.set("title",r.data.title);
              this.$util.storage.set("line_title_bg",r.data.line_title_bg);
              this.$util.storage.set("jwd",r.data.jwd);
              this.color=window.localStorage.getItem("color")
            });

          },
          getColumn(){
            let that = this;
            that.$http.get("api/PcData/getIndexData",{vollege_id:that.$util.vollege_id},r=>{
              that.columns=r.data.menu;
              // console.log('新改版的菜单链接：',r.data.menu);
            });
          },//获取所有栏目
          path(item){
              let that = this;
              that.$router.replace({path:item.url,query:{name:item.title,pid:item.id}});
          },
          SwitchFlag(){
            let that = this;
            that.status=true;
            that.flag=!that.flag;
          },



        }
    }
</script>

<style scoped>
  @import "../../assets/iconfont/iconfont.css";
  .screen_full{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
   /* background: #cccccc; */
    /*background: red;*/
    height: 100vh;
    width: 100vw;
    opacity: 0.6;
  }
  .main_menu{
    width: 100%;
    /*height: 100vh;*/
    position: relative;
    background: transparent;
  }
   .main_menu_left{
     position: fixed;
     z-index: 1000;
     width: 70px;
     height: 270px;
     /*background-image: url("../../assets/images/mainmenu/new_right.png");*/
     background-repeat: no-repeat;
     background-size: cover;
     right: 0%;
     top: 50%;
     transform: translateY(-50%);
   }
  .main_menu_right{
      position: fixed;
      z-index: 1000;
      width: 70px;
      height: 270px;
      /*background-image: url("../../assets/images/mainmenu/new_left.png");*/
      background-repeat: no-repeat;
      background-size: cover;
      right: 0%;
      top: 50%;
      transform: translateY(-50%);
  }
  .main_menu_list{
    position: absolute;
    z-index: 1000;
    width: 531px;
    /*height: 534px;*/
    right: 130%;
    top: 50%;
    transform: translateY(-50%);
    animation: myfirst 1s;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    /*background-color: rgba(41,190,116,0.7);*/
  }
  .every_colms{
    height: 115px;
    width: 115px;
    border-radius: 50%;
    /*background-color: rgba(41,190,116,0.7);*/
    /*opacity: 0.7;*/
    margin-bottom: 30px;
    margin-right: 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .every_colms_top{
    height: 40px;
    width: 40px;
  }
  .every_colms_bottom{
    padding-top: 10px;
    color: white;
    font-size: 16px;
    text-align: center;
  }

  .main_menu_list2{
    position: absolute;
    z-index: 1000;
    width: 531px;
    /*height: 534px;*/
    right: -900%;
    top: 50%;
    transform: translateY(-50%);
    animation: myfirst2 1s;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }


  @keyframes myfirst
  {
    from {right: 0%}
    to {right: 130%}
  }
  @keyframes myfirst2
  {
    from {right: 130%}
    to {right: -900%}
  }




</style>
